.ui-checkbox {
  display: inline-block;
  position: relative;

  input[type='checkbox'] {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);

    &:checked {
      ~ i {
        color: @brand-primary;
        border-color: @brand-primary;
      }
      ~ span {
        color: @brand-primary;
      }
    }
  }

  i {
    width: 20px;
    height: 20px;
    border-radius: 2px;
    border: 2px solid #bbb;
    color: #bbb;
    line-height: 16px;
    text-align: center;
    float: left;

    &:after {
      content: '\e013';
      font-family: 'Glyphicons Halflings';
      font-size: 12px;
      font-style: normal;
    }
  }

  span {
    display: block;
    color: #333;
    margin-left: 28px;
  }
}

.ui-checkbox._block {
  display: block;
}